<template>
	<div id="app">
		<div class="content">
			<div class="status">{{status}}</div>
			<div v-for="item in hisMessage.content" style="overflow: hidden;margin: 3vw 0;padding:0 3vw;">
				<div class="left"  v-if="userId != item.sendId" >
					<div class="msg">
						<img src="@/static/img/touxiang.png" alt="">
						<p>{{item.msg}}</p>
					</div>
				</div>
				<div class="right" v-else>
					<div class="msg">
						<p>{{item.msg}}</p>
						<img src="@/static/img/touxiang.png" alt="">
					</div>
				</div>
			</div>
		</div>
		<div id="footer">
			<img src="@/static/img/xiaolian.png" alt="">
			<input class="my-input" v-model="messageContent" type="text">
			<p class="send" @click="messageSend">发送</p>
		</div>
	</div>
</template>
<script>
const RongIMLib = require('@/static/js/IMSDK/RongIMLib-3.0.7-dev');
import {getUrlParam} from '@/static/js/filter.js'
// import { md5 } from ''
var im = RongIMLib.init({ appkey: 'qf3d5gbjq9qxh' });
export default{
	data(){
		return {
			userId:'',
			data:{},
			status:'链接中..',
			messageContent:'',
			hisMessage:{}
		}
	},
	onLoad(){
		uni.setNavigationBarTitle({
			title:decodeURI(getUrlParam('username'))
		})
		const _this = this;
		this.$api.findByHealthId().then((res)=>{
			if(res.data.StatusCode == 200){
				const data = res.data.Result
				this.$api.IMgetUserToken({id:data.id,name:data.realName,portrait:'http://jlm-file.oss-cn-hangzhou.aliyuncs.com/jlm-product/image/portrait/2020/11/9472ab92fe90400fbee424c2d6b02fb0.png'}).then((res2)=>{
					im.connect({token: res2.data.Result.token}).then(function(user) {
						_this.userId  = user.id
						_this.status = '链接成功'
						im.Conversation.getList({count: 30}).then(function(conversationList) {
						  console.log('获取会话列表成功22222222222', conversationList);
						});
						if(localStorage.hisMessage){
							const hisMessage = JSON.parse(localStorage.hisMessage)
							hisMessage.map((a,ai)=>{
								if(a.fromId ==  user.id && a.toId == getUrlParam("toUserId")){
									_this.hisMessage = a
								}
							})
						};
						console.log('链接成功, 链接用户 id 为: ', user.id);
					}).catch(function(error) {
						_this.status = '链接失败'
						_this.hisMessage = []
						console.log('链接失败: ', error.code, error.msg);
					});
				})
			}  
		})
	},
	methods:{
		messageSend(){
			const _this = this;
			if(!_this.messageContent){
				vant.Toast('不能发送空消息');
				return;
			}
			var conversation = im.Conversation.get({
				targetId: getUrlParam("toUserId"),
				type: RongIMLib.CONVERSATION_TYPE.PRIVATE
			});
			conversation.send({
				messageType: 'RC:TxtMsg', // 'RC:TxtMsg'
			content: {
				content: _this.messageContent // 文本内容
			}
			}).then(function(message){
				if(localStorage.hisMessage){
					const hisMessage = JSON.parse(localStorage.hisMessage)
					hisMessage.map((a,ai)=>{
						if(a.fromId == _this.userId && a.toId == getUrlParam("toUserId")){
							hisMessage[ai].content.push({msg:_this.messageContent,sendId:_this.userId})
							localStorage.setItem('hisMessage',JSON.stringify(hisMessage))
							_this.hisMessage = hisMessage[ai]
						}else{
							const data = [{fromId:_this.userId,toId: getUrlParam("toUserId"),content:[{msg:_this.messageContent,sendId:_this.userId}]}]
							const newHisMessage = hisMessage.concat(data)
							localStorage.setItem('hisMessage',JSON.stringify(newHisMessage))
							_this.hisMessage = newHisMessage[newHisMessage.length-1]
						}
					})
				}else{
					const data = [{fromId:_this.userId,toId: getUrlParam("toUserId"),content:[{msg:_this.messageContent,sendId:_this.userId}]}]
					localStorage.setItem('hisMessage',JSON.stringify(data))
					_this.hisMessage = data[0]
				}
				_this.messageContent = ''
			});
		},
		// 返回
		onClickLeft(){
			window.history.back()
		}
	}
}
</script>
<style>
	 #app{min-height:100vh;background: #f1f1f1;}
	.header {width: 100vw;border-bottom: 1px solid #dfdfdf;padding: 0 2vw;height: 6vh;line-height: 6vh;background: #fff;position: fixed;box-sizing: border-box;z-index: 100;text-align: center;}
	.back {position: absolute;top: 0;left: 2vw;background: url('@/static/img/left.png') no-repeat;width: 3vw;height: 6vw;background-size: 100%;margin-top: 2.5vw;}
	.content{padding-top: 6vh;min-height: 88vh;max-height: 88vh;overflow: auto;}
	.content .status{font-size: 3.5vw;color: #9c9c9c;text-align: center;padding:2vw 0;}
	#footer {position: fixed;bottom: 0;height: 6vh;background-color: #fff;line-height: 6vh;width: 100%;;border-top: 1px solid #ddd;display: flex;align-items: center;}
	#footer img {margin-left: 1vw;width: 6vw;height: 6vw;}
	#footer input{flex:1;border-radius: 1vw;border: 1px solid #ddd;padding: 0 1vw;height: 4vh;margin-left: 3vw;margin-right: 3vw;}
	#footer button{width: 12vw;}
	.send{width: 18vw;height: 4vh;text-align: center;line-height: 4vh;margin-right: 2vw;border-radius: 1vw;color: #fff;background: #2db98b;}
	.left{float: left;}
	.right{float: right;}
	.right .msg,.left .msg{display: flex;align-items: center;}
	.right .msg img,.left .msg img{width: 10vw;height: 10vw;}
	.right .msg p{max-width: 60vw;padding:2vw;background: #fff;border-radius: 1vw;margin-right: 2vw;word-wrap:break-word;}
	.left .msg p{max-width: 60vw;padding:2vw;background: #fff;border-radius: 1vw;margin-left: 2vw;word-wrap:break-word;}
</style>
